<template>
  <div class="app" >
    <TopNav @category-change="handleCategoryChange" />
    <router-view></router-view>
     <el-button
      v-if="showBackToTop"
      class="back-to-top-button"
      @click="scrollToTop"
      icon="Upload"
    ></el-button>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import TopNav from '@/components/TopNav.vue'
import { ref, onMounted, onUnmounted } from "vue";

const router = useRouter()
const route = useRoute()

const handleCategoryChange = (categoryId) => {
  if (route.name === 'Home') {
    // 如果当前在首页，直接更新查询参数
    router.replace({
      query: {
        ...route.query,
        category: categoryId
      }
    })
  }
}

// 滚动事件处理函数
const showBackToTop = ref(false);
const handleScroll = () => {
  showBackToTop.value = window.scrollY > 100;
  console.log(showBackToTop.value);
};

// 返回顶部函数
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};
onMounted(() => {
  // 添加滚动事件监听器
  window.addEventListener("scroll", handleScroll, true);
  handleScroll();
});

onUnmounted(() => {
    observer.disconnect();
    window.removeEventListener("scroll", handleScroll);
    window.removeEventListener("beforeunload", handlePageUnload);
  });
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body{
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

#app {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
  min-width: 100%;
  color: #2c3e50;
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: whitesmoke;
  cursor: url("/images/backgroundImages/67992.png"), auto;
}

.el-carousel__container {
  width: 100%;
}

.app {
  min-height: 100vh;
  background-color: #f4f5f6;
}
/* 返回顶部按钮样式 */
.back-to-top-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99;
  /* 添加以下样式 */
  width: 40px;
  height: 40px;
  background-color: #ede9e9;
  color: black;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
</style>
